<template>
  <div class="directorys-container">
    <!-- 1.面板 -->
    <el-card>
      <!-- 2.面包屑 -->

      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        class="el-card__header"
        v-if="this.$route.query.id"
      >
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ this.$route.query.name }}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 2.面包屑 /-->

      <!-- 3.表单 -->
      <div class="form">
        <!-- 第一个input框 -->
        <el-form :inline="true" v-model="querInfo" ref="querInfo">
          <el-form-item label="目录名称">
            <el-input
              v-model="querInfo.directoryName"
              clearable
              @clear="getDataList"
            ></el-input>
          </el-form-item>
          <!-- 下拉框 -->
          <template>
            <el-form-item label="状态">
              <el-select v-model="querInfo.state" placeholder="请选择">
                <el-option label="启用" :value="1"></el-option>
                <el-option label="禁用" :value="0"></el-option>
              </el-select>
            </el-form-item>
          </template>
          <!-- 按钮 -->
          <el-form-item>
            <el-button plain @click="clearForm">清除</el-button>
            <el-button type="primary" @click="getDataList">搜索</el-button>
          </el-form-item>

          <!-- 新增目录按钮 -->
          <!-- 文字返回按钮 -->
          <span class="icon-back" @click="backbtn" v-if="this.$route.query.id">
            <i class="el-icon-back bgc"></i>
            <el-button type="text">返回学科</el-button>
          </span>

          <!-- 文字返回按钮 /-->
          <el-button
            class="filter-item fr crllo"
            size="small"
            style="margin-left: 10px;"
            @click="handleChange()"
            type="primary"
            icon="el-icon-edit"
            >新增目录</el-button
          >
          <!-- 新增目录按钮 /-->
        </el-form>
      </div>
      <!-- 3.表单 /-->

      <!-- 4.总数据条显示 -->
      <el-alert
        :title="`数据一共${totalCout}条`"
        type="info"
        show-icon
        :closable="false"
        class="title"
      >
      </el-alert>
      <!-- 4.总数据显示 /-->

      <!-- 5.数据列表 -->
      <template>
        <el-table style="width: 100%" :data="dataList">
          <!-- A.序号  -->
          <el-table-column label="序号" width="80" type="index">
          </el-table-column>
          <!-- B.所属学科 -->
          <el-table-column label="所属学科">
            <template slot-scope="scope">
              <span>{{ scope.row.subjectName }}</span>
            </template>
          </el-table-column>
          <!-- C.目录名称 -->
          <el-table-column label="目录名称">
            <template slot-scope="scope">
              <span>{{ scope.row.directoryName }}</span>
            </template>
          </el-table-column>
          <!-- D.创建者 -->
          <el-table-column label="创建者">
            <template slot-scope="scope">
              <span>{{ scope.row.username }}</span>
            </template>
          </el-table-column>
          <!-- E.创建日期 -->
          <el-table-column label="创建日期">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate | parseTimeByString }}</span>
            </template>
          </el-table-column>
          <!-- F.面试题数量 -->
          <el-table-column label="面试题数量">
            <template slot-scope="scope">
              <span>{{ scope.row.totals }}</span>
            </template>
          </el-table-column>
          <!-- G.状态 -->
          <el-table-column label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state">已启用</span>
              <span v-else>已禁用</span>
            </template>
          </el-table-column>
          <!-- H.操作 -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="toggleState(scope.row)">{{
                scope.row.state ? '禁用' : '启用'
              }}</el-button>
              <el-button
                type="text"
                :disabled="scope.row.state === 1"
                @click="handleChange(scope.row)"
                >修改</el-button
              >
              <el-button
                type="text"
                :disabled="scope.row.state === 1"
                @click="removerUserByid(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 5.数据列表 /-->

      <!-- 6.分页 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Number(querInfo.page)"
        :page-size="Number(querInfo.pagesize)"
        :page-sizes="[5, 10, 20, 50]"
        layout="prev,pager,next,sizes,jumper"
        :total="Number(totalCout)"
        class="right"
      >
      </el-pagination>
      <!-- 6.分页 /-->

      <!-- 7.添加新增用户框  接收过来重新渲染列表 -->
      <div v-if="addShow">
        <directorys-add
          ref="Directorys"
          :item="item"
          :title="title"
          @newDataes="getDataList"
          @clear="item={}"
        ></directorys-add>
      </div>
      <!-- 7.添加新增用户框 /-->
    </el-card>
    <!-- 1.面板 /-->
  </div>
</template>

<script>
// 调用接口的思路
// 一、找数据接口
// 二、把接口封装为请求方法
// 三、在组件中请求获取数据
// 四、模板绑定
import { list, changeState, remove } from '@/api/hmmm/directorys' //  01-组件方法加载进来
import DirectorysAdd from '../components/directorys-add.vue'
export default {
  name: 'directorys',
  data() {
    return {
      totalCout: 0, // 总共的条数
      value: '',
      directoryFrom: null,
      dataList: [], // 最开始空数组
      amend: [], // 修改的空数组
      // 接口文档中 需要接收的参数数据
      // 获取用户列表的参数对象
      querInfo: {
        // 当前每页显示多少条数据
        pagesize: 10,
        subjectID: null,
        // 当前页数
        page: 1,
        directoryName: null,
        state: null
      },

      item: {}, // 传入 子组件的数据
      title: '', // 传入子组件的标题

      // 控制修改用户对话框的显示与隐藏
      addShow: true
    }
  },
  components: {
    DirectorysAdd
  },
  computed: {
    list() {
      return list
    }
  },
  created() {
    this.getDataList() // 02-调用加载数据
  },
  methods: {
    // 渲染数据
    async getDataList() {
      this.querInfo.subjectID = this.$route.query.id || null

      const { data } = await list(this.querInfo)
      // console.log(data)
      this.dataList = data.items // 获取data 中的列表
      this.totalCout = data.counts // 获取data 中的总条数
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.querInfo.pagesize = parseInt(val)
      console.log(`每页 ${val} 条`)
      console.log(this.querInfo.pagesize)
      // if (this.querInfo.page === 1) {
      console.log(this.querInfo)
      this.getDataList({
        pagesize: this.querInfo.pagesize
      }) // 重新渲染
      // }
    },
    // 监听 页码值 改变事件
    handleCurrentChange(val) {
      this.querInfo.page = parseInt(val)
      console.log(`当前页: ${val}`)
      console.log(this.querInfo.page)
      this.getDataList({
        page: this.querInfo.page
      })
    },
    // 清除
    clearForm() {
      this.querInfo = {
        // 当前每页显示多少条数据
        pagesize: 10,
        subjectID: null,
        // 当前页数
        page: 1,
        directoryName: null,
        state: null
      }
      this.getDataList()
    },
    // 进入新增用户 或修改
    handleChange(row) {
      this.$refs.Directorys.open()
      if (row) {
        this.title = '修改目录'
        this.$nextTick(() => {
          this.item = row
        })
      } else {
        this.title = '添加目录'
        this.item = {}
      }
      this.$refs.Directorys.open()
    },
    // 启用和禁用
    async toggleState(article) {
      await changeState({
        id: article.id,
        state: article.state === 1 ? 0 : 1
      })
      this.$message.success('操作成功')
      article.state = article.state === 1 ? 0 : 1
    },
    // 删除
    removerUserByid(user) {
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: user })
            .then(response => {
              //! 修复删除的BUG
              if (document.querySelectorAll('.el-card tbody tr').length === 1) {
                this.querInfo.page = this.querInfo.page > 1 ? this.querInfo.page - 1 : 1
              }
              this.$message.success('删除成功')

              this.dataList.splice(user, 1)

              this.getDataList(this.querInfo)
            })
            .catch(response => {
              this.$message.error('删除失败')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作！')
        })
    },
    // 返回按钮
    backbtn() {
      this.$router.go(-1)
    }
  },
  watch: {
    $route: function() {
      console.log(this.$route.query)
      this.getDataList()
    }
  }
}
</script>

<style scoped>
.directorys-container {
  padding: 10px;
}
.el-card__header {
  padding: 10px 9px 20px 9px;
}
.lift {
  padding-left: 40px;
}
.crllo {
  border: 1px solid #67c23a;
  background-color: #67c23a;
}
.shuju {
  margin-top: 10px;
}
.form {
  position: relative;
  padding: 20px 20px 0px !important;
}
.button-btn {
  margin: 0;
  padding: 0;
  outline: none;
  border-radius: 0;
  background-color: transparent;
  line-height: inherit;
  width: max-content;
  border: none;
}

.right {
  text-align: right;
  margin-top: 20px;
}
.title {
  margin-bottom: 20px;
}
.icon-back {
  position: absolute;
  right: 130px;
}
.bgc {
  color: #409eff;
}
</style>
